import React,{Component} from 'react';
import LazyLoad from 'react-lazyload';
import Card from '../../../widget/card/card.jsx';
import './classifyList.scss';
import { search } from 'api/company.js';
import { getGoodsList } from 'api/good.js';
import {
  Link
} from 'react-router-dom';
export default class ClassifyList extends Component{
	constructor (props) {
		super(props)
		this.state={
			list: ['综合', '最新', '价格'],
			listSum: 0,
			sort: 1,
			color3: '',
			companyList: [],
			info: [],
			currentPage: 0,
      lastPage: 0
		}
	}
	show (index) { //list点击切换
		this.setState({
			listSum: index
		},() => {
			if (this.state.listSum === 0) {
				this.setState({
					sort: 1,
					color3: '',
					companyList: [],
					info: []
				}, () => {
					if(this.props.location.state.keywords){
						this._search(1)
					} else{
						this._getGoodsList(1)
					}
				})
			} else if (this.state.listSum === 1) {
				this.setState({
					sort: 2,
					color3: '',
					companyList: [],
					info: []
				}, () => {
					if(this.props.location.state.keywords){
						this._search(1)
					} else{
						this._getGoodsList(1)
					}
				})
			} else {
				this.setState({
					color3:this.state.color3==='glyphicon glyphicon-down active' ? 'glyphicon glyphicon-up active' : 'glyphicon glyphicon-down active',
					sort:this.state.sort === 5 ? 4 : 5,
					companyList: [],
					info: []
				}, () => {
					if(this.props.location.state.keywords){
						this._search(1)
					} else{
						this._getGoodsList(1)
					}
				})
			}
		})
	}
	_search (num) { //店铺内搜索接口
		search({
			shop_id : this.props.location.state.shop_id,
			keywords: this.props.location.state.keywords,
			sort: this.state.sort,
			page: num
		}).then(res => {
			if(res.code === 1){
				this.setState({
					companyList: this.state.companyList.concat(res.data.goods_info),
					currentPage: num,
          lastPage: res.data.last_page
				})
			}
		})
	}
	_getGoodsList (num) { //商品列表接口
  	getGoodsList({
  		cat_id: this.props.location.state.cat_id,
      sort:this.state.sort,
      pageSize: 10,
      shop_id: this.props.location.state.shop_id,
      page: num
  	}).then(res => {
  		if (res.code===1){
  			this.setState({
          info:this.state.info.concat(res.data.data),
          currentPage: num,
          lastPage: res.data.last_page
		  	})
  		}
  	})
  }
	componentDidMount () {
		if(this.props.location.state.keywords){
			this._search(1)
		} else{
			this._getGoodsList(1)
		}
		let that=this;
    let i=1;
    window.onscroll= function(){
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        if(that.props.location.state.keywords){
					that._search(i++)
				} else{
					that._getGoodsList(i++)
				}
      }else{          //恢复正常
        
      }
    }
	}
	render(){
		return(
			<div className="classifyList">
				<div className="classify_title">
					<Link to={
						{
							pathname:'/company',
							state:{shop_id:this.props.location.state.shop_id}
						}
					}><span className="glyphicon glyphicon-back back"></span></Link>
					{
						this.props.location.state.keywords ? this.props.location.state.keywords : this.props.location.state.name
					}
				</div>
				<div className="classifyCon">
					<div className="classify_nav">
						{
							this.state.list.map((item,index) => {
								return(
									<div className={this.state.listSum === index ? 'active' : undefined} onClick={this.show.bind(this,index)} key={index}>{item}
									{index === 2 ? <span className={this.state.color3}></span> : ''}
									</div>
								)
							})
						}
					</div>
					<div className="cla_card">
						{
							this.props.location.state.keywords ?
							this.state.companyList.map((item,index) =>{
								return (
	                <LazyLoad offsetTop={200} key={index} height={0}>
	                  <Card shopDetail={{...item, hide: false}}/>
	                </LazyLoad>
	              )
							})
							: this.props.location.state.name ?
							this.state.info.map((item,index) =>{
								return (
	                <LazyLoad offsetTop={200} key={index} height={0}>
	                  <Card shopDetail={{...item, hide: false}}/>
	                </LazyLoad>
	              )
							})
							: ''
						}
					</div>
				</div>
				<div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板，没有更多了！ ————</div>
			</div>
		)
	}
}